<template>
	<div class="navbar">
		<div class="btn nav_back" @click='backClick'></div>
		<div class="label">{{title}}</div>
		<div class="btn nav_right" @click='rightClick'></div>		
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		props:['title'],
		methods:{
			backClick(){
				this.$emit('backClick');
			},
			rightClick() {
				this.$emit('rightClick');	
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.navbar {
	position: relative;
	height: 44px;
	background-color: #ffffff;
	font-size: 17px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
}
.nav_back {
	background: url('../assets/icon_back.png');
}
.nav_right {
	background:url('../assets/add.png');
}
.btn {
	width: 44px;
	height: 50%;
	background-size:contain;
	background-repeat: no-repeat;
}
.label {
	margin-left: auto;
	margin-right: auto;
}

</style>